import React from 'react'
import ReactDOM from 'react-dom'
import * as AssetAction  from '../actions/AssetAction';
import { connect }  from 'react-redux';
import Paging from './Paging'
import _ from 'lodash'

import AssetGridCell from './AssetGridCell'

class AssetMultiSelect extends React.Component{
  constructor(props) {
    super(props)

    this.paging = {
      offset: 0,
      limit: 6
    }

    this.state = {
      selectedAssets: []
    }
  }

  componentDidMount() {
    var self = this;
    var appId = self.props.wechat.length > 0?self.props.wechat[0].appId:''
    this.props.dispatch(
      AssetAction.loadAssetsAsync({
        type: 'news',
        offset: self.paging.offset,
        count: self.paging.limit,
        appId: appId
      })
    )
  }

  componentDidUpdate() {
    // console.log(this.props.assets)
  }

  onPageChange(page) {
    var self = this;
    self.paging.offset = (page-1) * self.paging.limit
    var appId = self.props.wechat.length > 0?self.props.wechat[0].appId:''
    this.props.dispatch(
      AssetAction.loadAssetsAsync({
        type: 'news',
        offset: self.paging.offset,
        count: self.paging.limit,
        appId: appId
      })
    )
  }

  onAssetGridClick(media_id, data, cell) {
    var hasOne = false;
    var $cell = $(ReactDOM.findDOMNode(cell));

    var selectedCount = 0;
    for (var i = 0; i < this.state.selectedAssets.length; i++) {
      var asset = this.state.selectedAssets[i];
      selectedCount += asset.content.news_item.length;
      if (asset.media_id == media_id) {
        hasOne = true
      }
    }
    var selectedAssets = this.state.selectedAssets;
    if (hasOne) {
      _.remove(selectedAssets, function(asset) {
        return asset.media_id == media_id
      })
      // $cell.removeClass("asset-grid-cell-selected")
    }
    else {
      var newDataCount = data.news_item.length;
      if (newDataCount + selectedCount > 8) {
        return;
      }
      selectedAssets.push({
        media_id: media_id,
        content: data
      })
      // $cell.addClass("asset-grid-cell-selected")
    }
    this.setState({
      selectedAssets: selectedAssets
    })

  }

  onAssetGridSubmit() {
    var selectedAssets = this.state.selectedAssets;
    this.props.onAssetGridSubmit(this.state.selectedAssets)
    this.setState({
      selectedAssets: []
    })
  }

  onAssetGridCancel() {
    this.setState({
      selectedAssets: []
    })
  }

  renderAsset() {
    if (this.props.assets.item) {
      var self = this;
      return this.props.assets.item.map(function(item) {
        var hasOne = _.find(self.state.selectedAssets, function(asset) {
          return asset.media_id == item.media_id
        })
        return (
          <AssetGridCell
            selected = {hasOne}
            onAssetGridClick={self.onAssetGridClick.bind(self)}
            wechat = {self.props.wechat}
            data = {item}/>
        )
      })
    }else {
      return "";
    }
  }

  render() {

    var self = this;

    var offset = parseInt(this.paging.offset),
        limit = parseInt(this.paging.limit)

    var current = Math.ceil(offset/limit) + 1;
    var count = 0;
    if (this.props.assets.item) {
      count = this.props.assets.total_count;
    }

    var selectedCount = 0;
    for (var i = 0; i < this.state.selectedAssets.length; i++) {
      var assets = this.state.selectedAssets[i];
      selectedCount += assets.content.news_item.length;
    }
    console.log(selectedCount)
    var selectedTitle = "已选择"+selectedCount+"条图文内容, 合并后的多图文最多显示8条"
    return(
      <div className="modal fade" id={this.props.ref} tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="Property-modal-label">选择图文</h4>
              <p>{selectedTitle}</p>
            </div>
            <div className="modal-body">
              <div className="asset-modal-content row">
                {this.renderAsset()}
              </div>
              <div className="modal-paging">
                <Paging
                  current = {current}
                  count = {count}
                  limit = {limit}
                  onPageChange = {this.onPageChange.bind(self)}
                />
              </div>
            </div>
            <div className="modal-footer">

              <button type="button" className="btn btn-default" data-dismiss="modal"
                      onClick={(event)=> this.onAssetGridCancel()}>取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onAssetGridSubmit()}>提交</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return { assets: state.assets }
}

export default connect(mapStateToProps)(AssetMultiSelect)
